| 先ほど紹介した方法では、ページ内にプラグイン機能を表示するための領域が必要となってしまいます。このような表示形式を好まれない方は、EMBEDタグにhidden属性を追加することでプラグイン機能を非表示とすることができます。しかし、これでは再生/停止ボタンを使用できなくなってしまいます。この問題は、新たに再生/停止ボタンを作成し、onClickイベントで直接EMBEDタグを操作することにより解決できます。こうすると、ページ内には再生/停止用のボタンだけが表示され、ボタンをクリックすることで音の再生や停止が行えるようになります。 |
<EMBED name="em1" src="m01.mid" hidden="true" autostart="false">
<form>
<input type="button" value="音楽を再生" onClick="document.em1.play()">
<input type="button" value="音楽を停止" onClick="document.em1.stop()">
</form>
|
 |
EMBEDタグを記述する際は、必ずname属性でオブジェクト名を指定するようにしてください(上記の例では「em1」というオブジェクト名)。続けてプラグイン機能を非表示とするため、hidden属性に「true」を指定しておきます。また、作成した再生/停止ボタンには、onClickイベントを追加します。
onClickイベントでは、「document.オブジェクト名.play()」と記述すると再生機能が、「document.オブジェクト名.stop()」と記述すると停止機能が付加されるようになります。
なお、この例ではフォームボタンを使って「再生」や「停止」を行うためのボタンを作成していますが、これは必ずしもフォームボタンを使わなければいけないというわけではありません。オリジナル画像にonClickイベントを追加して、再生/停止ボタンを作成することもできます。
※この機能を利用するには、プラグインが必要です。ブラウザにMIDIファイルを再生できるプラグインをインストールしてください。
Windowsの方は→
Windows Media Player(Microsoft)
http://www.microsoft.com/japan/windows/windowsmedia/software/playerv7.asp
Macの方は→
Quicktime(Apple)
http://www.apple.co.jp/quicktime/download/
|